<template>
  <div class="catalog_page">
    <!-- <div class="catalog_list">概说</div> -->
    <div class="wrap_catalog">
      <div :class='(index<Math.ceil(list.length*0.2)&&messageCode!="null")||messageCode=="null"?"catalog_list":"catalog_no"' v-for="(item,index) in list" :key="index" 
      @click="changeCatalog(item.bookId,item.markId,index)">
        {{item.chapterName}}
      </div>
    </div>
  </div>
</template>

<script>
import { catalogList } from '@/api/resource'

export default {
  name:'ebook',
  data() {
    return {
      list: [],
      id:this.$route.query.bookid,
      messageCode:localStorage.getItem('messageCode')
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList() {
      catalogList({bookid:this.id}).then(res => {
        console.log(res,'catalog')
        this.list = res.data
      })
    },
    changeCatalog(bookid,markid,index) {//更换章节
      if(this.messageCode != "null") {
        if(index < this.list.length * 0.2) {
          this.$router.push({path:'ebook',query:{bookid:bookid,markid:markid}})
        }
      } else {
        this.$router.push({path:'ebook',query:{bookid:bookid,markid:markid}})
      }
      localStorage.setItem('messageCode',this.messageCode)
    },
  }
}
</script>

<style scoped>
.catalog_page{
  padding: 0 0.3rem;
  color: #696969;
  overflow-y: scroll;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.catalog_list{
  color: #000;
  height: 0.9rem;
  line-height: 0.9rem;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.catalog_no {
  color: #999;
  height: 0.9rem;
  line-height: 0.9rem;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
}
</style>
